<template>
  <div class="brand">
     <h3>品牌制造商直供</h3>
     <ul>
         <li v-for="(item,index) in brandListArr" :key="index">
             <img v-lazy="item.pic_url" alt="">
             <p>{{item.name}}</p>
             <span>{{item.floor_price|formPrice}}</span>
         </li>
         
     </ul>
     <h4>周一周四·新品首发</h4>
    <ol>
        <li v-for="(item,index) in newGoodsListArr" :key="index">
            <div><img v-lazy="item.list_pic_url" alt=""></div>
            <p>{{item.name}}</p>
            <span>{{item.retail_price|formPrice}}</span>
        </li>
    </ol>
    <div class="newbox">
         <h4>人气推荐</h4>
        <div class="new" v-for="(item,index) in hotGoodsListArr"  :key='index'>
            <van-card
            
            
            :title="item.name"
            :thumb="item.list_pic_url"
        
            />
            <p>{{item.goods_brief}}</p>
            <span>{{item.retail_price|formPrice}}</span>
        </div>   
    </div>

    <div class="specialTopic">
          <h4>专题精选</h4>
        <van-swipe :loop="false" :width="300" :show-indicators='false'>
           <div  v-for="(item,index) in topicListArr" :key="index">
                <van-swipe-item >
                <img v-lazy="item.scene_pic_url" alt=".">
                 </van-swipe-item>
            <h6>
                 <span>{{item.title}}</span>
                 <b>￥59.90起</b>
            </h6>
            <p>{{item.subtitle}}</p>
           
           </div>
        </van-swipe>
    </div>

    <div v-for="(item,index) in categoryListArr" :key="index">
         
            <h4>{{item.name}}</h4>
      <ol >
            <li v-for="(item,index) in item.goodsList" :key="index" >
                <div><img v-lazy="item.list_pic_url" alt=""></div>
                <p>{{item.name}}</p>
                <span>{{item.retail_price|formPrice}}</span>
            </li>
      </ol>
    </div>
   
  </div>
</template>

<script>
export default {
data(){
    return{
       list1:[],
       list2:[],
       list3:[],

    }
},

 mounted(){
 
     
},
props:["brandListArr","newGoodsListArr",'hotGoodsListArr','topicListArr','categoryListArr'],
 methods: {
  
  },
}
</script>

<style lang='less' scoped>

div{
    width: 100%;
    h3{
        margin: 20px 0;
        width: 100%;
        text-align: center;
        font-size: 21px;
    }
    h4{
        margin: 30px 0 25px;
        width: 100%;
        text-align: center;
        font-size: 18px;
    }
    .specialTopic{
       

        width: 95%;
        margin: 0 auto 50px;
        h4{
        margin: 30px 0 20px;
        width: 100%;
        text-align: center;
        font-size: 18px;
        }
       
        .van-swipe{
            h6{
                margin: 20px 0;
                span{
                    font-size: 16px;
                }
                b{
                    color: rgb(151, 30, 30);
                    font-size: 16px;
                }
            }
            p{
                font-size: 16px;
                width: 250px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              // overflow: auto;
             .van-swipe-item{
                width: 100%;
                height: 200px;
                padding-right: 13px;
                // margin-right: 13px;
                // margin-left: 13px;
                
                img{
                    width: 100%;
                    height: 100%;
                }
          
      
        }
        }
       
    }
    .newbox{
        
        margin-top: 40px;
        h4{
            font-size: 20px;
        }
        div{
            height: 100px;
            margin-bottom: 10px;
            position: relative;
            .van-card{
                width: 100%;
            }
            p{
                position: absolute;
                left: 110px;
                top: 43px;
                font-size: 12px;
            }
            span{
                position: absolute;
                 left:112px;
                 bottom: 6px ;
                font-size: 13px;
                color: rgb(151, 30, 30);
            }
        }
      
    }
    ol{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
   
        li{
            text-align: center;
            position: relative;
            width: 50%;
            margin-bottom: 30px;
            div{
                width: 95%;
                margin: 0 auto;
            }
            img{
                width: 100%;
            }
            p{
                width: 90%;
                margin: 0 auto;
                text-align: center;
               
                font-size: 16px;
            }
            span{
                
                font-size: 16px;
                
                color: rgb(151, 30, 30);
            }
        }
}
    ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
   
    li{
        position: relative;
        width: 49%;
        margin-bottom: 8px;
        img{
            width: 100%;
        }
        p{
            position: absolute;
            top: 13px;
            left: 7px;
            font-size: 16px;
        }
        span{
            position: absolute;
            font-size: 16px;
            top: 43px;
            left: 5px;
            color: rgb(151, 30, 30);
        }
    }
}
}
.van-card{
    font-size: 18px;
   
}
</style>